<template>
  <div class="all">
    <div class="top">
      <el-row type="flex" style="width: 100%;height: 40px">
        <el-col span="2">
          <div style="display: flex;align-items: center;">
            <el-avatar :size="80" :src="user.avatar"></el-avatar>
          </div>
        </el-col>
        <el-col span="3">
          <div style="display: flex;align-items: center;height: 100%">{{ user.username }}</div>
        </el-col>
        <el-col span="16">
        </el-col>
        <el-col span="3">
          <div style="display: flex;align-items: center;float: right;margin: 70px 10px 5px 0">
            <el-button icon="el-icon-plus" round>关注</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row style="width:92%;position: absolute;margin-left:8%">
        <el-col>
          <div style="display: flex;align-items: center;height: 100%"><i class="el-icon-user"></i>身份：{{user.status}}</div>
        </el-col>
      </el-row>
      <el-row style="width:92%;position: absolute;margin-top: 25px;margin-left:8%">
        <el-col>
          <div style="display: flex;align-items: center;height: 100%"><i class="el-icon-view"></i>总浏览量：{{dataSum.sumview_counts}}</div>
        </el-col>
      </el-row>
      <el-row style="width:92%;position: absolute;margin-top: 50px;margin-left:8%">
        <el-col>
          <div style="display: flex;align-items: center;height: 100%"><i class="el-icon-date"></i>加入芝士校园时间：{{user.create_time}}</div>
        </el-col>
      </el-row>
    </div>
    <div class="main">
      <div style="width: 24.5%;height: 600px;background-color: white; border: 1px solid #eaeaef;">
        <div style="">
          <div style="width: 100%; border-bottom: 1px solid #EBEEF5;">
            <p style="display: flex;justify-content:center;font-size: 20px">个人成就</p>
          </div>
          <hr style="height: 1px;background-color: #920ed3">
          <div style=";width: 100%">
            <div style="display: flex;align-items: center;height: 40px">&nbsp&nbsp&nbsp&nbsp&nbsp<i class="el-icon-edit"></i>共发布{{dataSum.count}}条帖子</div>
            <div style="display: flex;align-items: center;height: 40px">&nbsp&nbsp&nbsp&nbsp&nbsp<i class="el-icon-thumb"></i>共获得{{dataSum.sumup_counts}}次点赞</div>
            <div style="display: flex;align-items: center;height: 40px">&nbsp&nbsp&nbsp&nbsp&nbsp<i class="el-icon-chat-line-round"></i>帖子共获得{{dataSum.sumcomment_counts}}次评论</div>
          </div>
        </div>
        <div>
          <hr style="height: 1px;background-color: #920ed3">
          <div style="width: 100%">
            <p style="display: flex;justify-content:center;font-size: 20px">是否愿意向朋友推荐？</p>
          </div>
          <hr style="border: 1px solid #920ed3;">
          <div style="width: 100%;height: 60px;display: flex;align-items: center">
            <el-rate v-model="value" :texts="texts" show-text  style="display: flex;justify-content:center;width: 100%"></el-rate>
          </div>
        </div>
      </div>
<!--      <div style="width: 24.5%;">-->
<!--        <div style="width: 100%">-->
<!--          <p style="display: flex;justify-content:center;font-size: 20px">个人成就</p>-->
<!--        </div>-->
<!--        <hr style="height: 1px;background-color: #920ed3">-->
<!--        <div style=";width: 100%">-->
<!--          <div style="display: flex;align-items: center;height: 40px">&nbsp&nbsp&nbsp&nbsp&nbsp<i class="el-icon-edit"></i>共发布{{dataSum.count}}条帖子</div>-->
<!--          <div style="display: flex;align-items: center;height: 40px">&nbsp&nbsp&nbsp&nbsp&nbsp<i class="el-icon-thumb"></i>共获得{{dataSum.sumup_counts}}次点赞</div>-->
<!--          <div style="display: flex;align-items: center;height: 40px">&nbsp&nbsp&nbsp&nbsp&nbsp<i class="el-icon-chat-line-round"></i>帖子共获得{{dataSum.sumcomment_counts}}次评论</div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div style="width: 24.5%;float: left">-->
<!--        <div style="width: 100%">-->
<!--          <p style="display: flex;justify-content:center;font-size: 20px">是否愿意向朋友推荐？</p>-->
<!--        </div>-->
<!--        <hr style="border: 1px solid #920ed3;">-->
<!--        <div style="width: 100%;height: 60px;display: flex;align-items: center">-->
<!--          <el-rate v-model="value" :texts="texts" show-text  style="display: flex;justify-content:center;width: 100%"></el-rate>-->
<!--        </div>-->
<!--      </div>-->

      <div style="width: 74%;height: 600px;background-color: white; border-bottom: 1px solid #EBEEF5;float: right">
        <div style="width: 100%;display: flex;justify-content: space-between">
          <div style="font-size: 20px">TA的帖子</div>
          <div style="display: flex;align-items: center;height: 26px">
            <input placeholder="搜索TA的内容" style="height: 25px;outline: none;border:0.5px solid dodgerblue;border-radius: 5px"></input>
            <el-button icon="el-icon-search" type="primary" @click="searchPost" style="height: 100%;width: 50px">搜索</el-button>
          </div>
        </div>
        <hr style="height: 1px;background-color: #920ed3">
        <div>
          <div v-for="(item,index) in postList.slice((currentPage-1)*pageSize,currentPage*pageSize)" key="index" style="display: flex;align-content: center;width: 100%;background-color: white" >
            <div class="item">
              <router-link  :to="{path:'/postDetail',query:{id: item.id}}">
              <div style=" color: #1b1f23">{{item.post_title}}</div>
              <div style="width: 100%;height: 75px">
                {{ item.articleAbstract }}
              </div>
              <el-row type="flex" style="width: 100%;height: 25px">
                <el-col span="4">
                  <div style=" color: #1b1f23"><i class="el-icon-view"></i>{{item.view_counts}}人浏览</div>
                </el-col>
                <el-col span="4">
                  <div  style=" color: #1b1f23"><i class="el-icon-chat-line-round"></i>评论{{item.comment_counts}}</div>
                </el-col>
                <el-col span="12">
                  <div style=" color: #1b1f23">{{item.up_counts}}人点赞</div>
                </el-col>
                <el-col span="6">
                  <div style=" color: #1b1f23">{{item.create_time}}</div>
                </el-col>
              </el-row>
            </router-link>
            </div>

          </div>
          <el-pagination align='center'
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[1,5,10,20]"
                         :page-size="pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="postList.length">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WatchOtherUser",
  data () {
    return {
      id:this.$route.query.id,
      currentPage:1,
      totalCount:0,
      pageSize:10,
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      value:null,
      texts:['强烈不推荐', '不推荐', '一般般', '推荐', '强烈推荐'],
      user: {},
      postList:[],
      dataSum:[],
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    selectPostByAuthorID(){
      this.$http.post('http://localhost:8888/Post/selectPostByAuthorID',{'id':this.id}).then(
        function (res){
          this.postList=res.data.data;
        })
    },
    sumAllPostData(){
      this.$http.post('http://localhost:8888/Post/sumAllPostData',{'id':this.id}).then(
        function (res){
          this.dataSum=res.data.data;
        })
    },
    selectById(){
      this.$http.post('http://localhost:8888/User/selectById',{'id':this.id}).then(
        function (res){
          this.user=res.data.data;
          this.selectPostByAuthorID();
          this.sumAllPostData();

        })
    },
  },
  created() {
    this.selectById();//需要先接收点击头像传来的用户id

  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.all{
  width: 100%;
  height: 800px;
  background-color: #e1e4e8;
}
.top{
  width: 80%;
  height:115px;
  background-color: white;
  position: absolute;
  margin-top: 50px;
  margin-left: 10%;
  border: 1px solid #eaeaef;
  border-radius: 3px;
}
.main{
  width: 80%;
  height:600px;
  position: absolute;
  margin-top: 175px;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  border-radius: 3px;
  border: 1px solid #eaeaef;
}
.item{
  padding: 10px;
  width: 100%;
  height: 120px;
  border: 1px solid #eaeaef;
  border-radius: 3px;
}

</style>
